<template>
    <div class="form-block-inner">
        <Form :model="formItem" label-position="top" ref="baseForm">
            <Alert>
               <span class="title-head">设定要件
                   <Tooltip :content="tipTitle" placement="right" theme="light" max-width="200" :transfer="true">
                       <Icon type="md-help-circle" class="excel-help"/>
                   </Tooltip>
               </span>
            </Alert>
            <div v-for="(item,index) in dataList" :key="index">
                <Row :gutter="16">
                    <Col span="8">
                        <FormItem class="required" prop="yj_title" label="要件名称:">
                            <Input v-model="item.yj_title" placeholder="请填写要件名称"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem class="required" prop="node" label="选择流程节点:">
                            <span slot="label">选择流程节点:
                                <Tooltip content="请选择需要上报该要件的节点。" placement="right" theme="light">
                                    <Icon type="md-help-circle" class="excel-help"/>
                                </Tooltip>
                            </span>
                            <Select placeholder="请选择" v-model="item.node" clearable filterable multiple>
                                <Option v-for="(item1,index) in nodeList" :key="index" :value="item1.id">{{
                                    item1.node_title }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem class="required" prop="yj_type" label="要件类型:">
                            <Select v-model="item.yj_type" style="width:100%">
                                <!--<Option value="表单">表单</Option>-->
                                <Option value="1">附件</Option>
                                <Option value="2">制式电子表单</Option>
                                <Option value="3">制式电子文本</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem prop="yi_img_demo" label="要件样本:">
                            <Button icon="ios-cloud-upload-outline" @click="uploadImgAction(item, index)">上传</Button>
                            <span class="upload-icon">
                            <Icon type="md-checkmark-circle" size="18" v-if="item.yi_img_demo" color="green"/>
                            <Icon type="md-close-circle" size="18" v-else color="red"/>
                            </span>
                        </FormItem>
                    </Col>
                    <template v-if="item.yj_type == '1'">
                        <Col span="8">
                            <FormItem class="required" prop="is_fu_yong" label="是否可复用要件:">
                                <RadioGroup v-model="item.is_fu_yong">
                                    <Radio label="是"></Radio>
                                    <Radio label="否"></Radio>
                                </RadioGroup>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem class="required" prop="is_xian_chang_cai_ji" label="是否现场采集:">
                                <RadioGroup v-model="item.is_xian_chang_cai_ji">
                                    <Radio label="是"></Radio>
                                    <Radio label="否"></Radio>
                                </RadioGroup>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem prop="upload_type" label="上传方式:">
                                <CheckboxGroup v-model="item.upload_type" @on-change="checkBoxChange">
                                    <Checkbox label="JPG"></Checkbox>
                                    <Checkbox label="PNG"></Checkbox>
                                    <Checkbox label="PDF"></Checkbox>
                                    <Checkbox label="Word"></Checkbox>
                                    <Checkbox label="Excel"></Checkbox>
                                </CheckboxGroup>
                            </FormItem>
                        </Col>
                    </template>
                </Row>
                <Row :gutter="16" class="row-m-t">
                    <Col span="12">
                        <FormItem prop="" label="要件依据:">
                            <Input placeholder="请填写要件依据的文件内容" v-model="item.yj_yi_ju"></Input>
                        </FormItem>
                    </Col>

                    <Col span="11">
                        <FormItem label=" " class="col-last-btn">
                            <Button @click="delAction(index)" type="error" shape="circle" icon="md-close"></Button>
                        </FormItem>
                    </Col>
                    <Divider class="mt10"/>
                </Row>
            </div>
            <Row v-if="nodeList.length > 0">
                <Col span="24">
                    <Button type="success" @click="add">添加</Button>
                </Col>
            </Row>
        </Form>
        <div class="btn-style" v-if="nodeList.length > 0">
            <common-save-btn :base-info-id="baseInfoId" :form-data="dataList" dbName="GovYaojian"></common-save-btn>
        </div>
        <import-imgs ref="imgService" :index="currentIndex" @result="importImgsResultAction"></import-imgs>
    </div>
</template>

<script>
import { select } from '@/api/setting'
import ImportImgs from './components/import-imgs/index'
import CommonSaveBtn from '@/components/common-save-btn/index'

export default {
  name: 'YaojianSetting',
  components: { ImportImgs, CommonSaveBtn },
  computed: {
    getUploadUrl () {
      return this.$config.upLoadFileUrl
    }
  },
  props: {
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    tabName: {
      type: String,
      default: () => {
        return ''
      }
    },
    baseInfoId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      formItem: {},
      dataList: [],
      nodeList: [],
      currentIndex: 0,
      tipTitle: '指办理该事项各个节点所需要的文件，包括附件、制式电子表单（申请单）、制式电子文本。'
    }
  },
  methods: {
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    add () {
      this.dataList.push({})
    },
    uploadImgAction (item, index) {
      let path = item.yi_img_demo
      this.currentIndex = index
      this.$refs.imgService.modelAction(path)
    },
    importImgsResultAction (path, index) {
      this.$set(this.dataList[index], 'yi_img_demo', path)
    },
    delAction (index) {
      this.dataList.splice(index, 1)
    },
    saveResultAction (data) {
      this.getList()
    },
    getList () {
      // console.log(this.baseInfoId, '@@@@@')
      let param = { base_info_id: this.baseInfoId }
      select('GovYaojian', param).then(res => {
        this.loading = false
        let data = res.data
        if (data.errcode === 0) {
          // console.log(res, '接口数据')
          for (let i = 0; i < data.data.length; i++) {
            data.data[i].node = data.data[i].gov_flow_id.split(',')
            data.data[i].upload_type = data.data[i].file_type ? data.data[i].file_type.split(',') : []
          }
          this.dataList = this.$common.xeUtils.clone(res.data.data)
          // console.log(this.dataList, '000')
        } else {
          this.$Message.error('数据获取失败!')
        }
      }).catch(ret => {
        this.loading = false
        // this.$Message.error(ret)
      })
    },
    checkBoxChange (val) {
      this.dataList = this.$common.xeUtils.clone(this.dataList)
    }
  },
  mounted () {
    // if (this.tabName === '11') this.getList()
    this.nodeList = this.options
  },
  watch: {
    options (data) {
      this.nodeList = data
    },
    tabName (data) {
      if (data === '11') this.getList()
    },
    baseInfoId (data) {
      this.baseInfoId = data
    }
    // dataList (data) {
    //   this.$emit('result', data)
    // }
  }
}
</script>

<style scoped lang="less">
    .title-head {
        font-weight: bold;
        font-size: 16px;
    }

    .excel-help {
        display: inline-block;
        margin-left: 10px;
        font-size: 16px;
        color: orange;
        cursor: pointer;
    }

    .btn-style {
        margin-top: 5px;
    }

    .upload-icon {
        padding-left: 10px;
    }

    .tag-box {
        margin-bottom: 10px;
    }

    .wl-float-left {
        float: left;
    }

    .row-m-t {
        margin-bottom: 10px;
    }

    .mr10 {
        margin-right: 10px;
    }

    .mb10 {
        margin-bottom: 10px;
    }

    .col-last-btn {
        float: right;
        margin-right: 40px;
    }

    .required /deep/ .ivu-form-item-label:before {
        content: '*';
        display: inline-block;
        margin-right: 4px;
        line-height: 1;
        font-family: SimSun;
        font-size: 14px;
        color: #ed4014;
    }

    /deep/ .ivu-alert {
        margin-bottom: 25px;
    }
</style>
